<template>
	<view class="">
		<u-swiper height='380' :list="swiperList" @click='selectSwiper'></u-swiper>
		<!-- 轮播下菜单 -->
		<!-- <scroll-view class="scroll-view_H u-rela" scroll-x="true" > -->
			<view class="u-flex u-row-between u-flex-wrap" :class="{nomore:more}">
				<view class="scroll-view-item_H" v-for="(item,index) in menuList" :key='index'
					@click='menuClick(item.path,item.type,item.login)'>
					<w-menu-icon :name='item.name' :icon='`/static/indevIcon${index+1}.png`'></w-menu-icon>
				</view>
			</view>
			<view class="u-text-center u-light-color u-m-20" @click="more=!more" >
				{{more?'展开':'收起'}}
			</view>
		<!-- </scroll-view> -->
		<view class="u-p-l-20 u-p-r-20" @click="noticeClick">
			<u-notice-bar mode="horizontal" :is-circular="false" :list="noticeList" bg-color='#f5faf8'></u-notice-bar>
		</view>
		<view class="u-p-l-20 u-p-r-20 u-m-t-30">
			<u-section title="社区头条" font-size='36' :right="false" line-color='#60c49a'></u-section>
			<w-list :list='topList' :showLoad='false'>
				<template>
					<view v-for="(item,index) in topList" :key="index">
						<w-index-list :item='item'></w-index-list>
					</view>
				</template>
			</w-list>
			<view class="u-p-20" @click="loadmore">
				<u-divider>{{status}}</u-divider>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		menuList,
		swiperList,
		noticeList,
		topList
	} from '@/static/data.js'
	import {
		selectSlideshow,
		selectScrollingText,
		getArticleList
	} from '@/api/index.js'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['login'])
		},
		data() {
			return {
				more:true,
				menuList: menuList,
				swiperList: [],
				swiper: [],
				noticeList: [],
				noticeList2: [],
				topList: [],
				status:'点击加载更多',
				pageNo:1
			}
		},
		onLoad() {
			this.selectSlideshow()
			this.selectScrollingText()
			this.getArticleList()
		},
		onShow() {
			uni.showTabBar()
		},
		onPullDownRefresh() {
			this.topList = []
			this.selectSlideshow()
			this.selectScrollingText()
			this.getArticleList()
		},
		methods: {
			loadmore(){
				this.pageNo++
				this.getArticleList()
			},
			noticeClick(){
				this.$u.route('/pages/index/webview/webview', {
					src: this.noticeList2[0].link
				})
			},
			getArticleList() {
				getArticleList({
					type: 3,
					pageNo: this.pageNo,
					pageSize: 5
				}).then(res => {
					if(res.list<5){
						this.status='没有更多数据了'
					}
					this.topList = this.topList.concat(res.list)
				})
			},
			selectSwiper(index) {
				this.$u.route('/pages/index/webview/webview', {
					src: this.swiper[index].link
				})
			},
			selectSlideshow() {
				selectSlideshow().then(res => {
					this.swiper = res
					this.swiperList = res.map(item => {
						let obj = {
							image: item.photo
						}
						return obj
					})
				})
			},
			selectScrollingText() {
				this.noticeList=[]
				this.noticeList2=[]
				selectScrollingText().then(res => {
					for (let i=0;i<3;i++) {
						this.noticeList.push(res.text)
						this.noticeList2.push(res)
					}
				})
			},
			menuClick(path, type, login) {
				if (login && this.login==0) {
					uni.showModal({
						title: '提示',
						content: '请先登录',
						success: (res) => {
							if (res.confirm) {
								this.$u.route('/pages/login/login')
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
				if (type == 'tab') {
					this.$u.route({
						url: path,
						type: 'tab'
					})
				} else {
					this.$u.route(path);
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.nomore{
		height: 340rpx;
		overflow: hidden;
	}
	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;

		&::after {
			position: absolute;
			content: '';
			width: 100%;
			height: 20rpx;
			top: -19rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx 20rpx 0 0;
		}
	}

	.scroll-view-item_H {
		width: 25%;
	}
</style>
